/* ArcWTF - browser.css
 * https://github.com/KiKaraage/ArcWTF */

/* Windows has 1px missing space on top of window, but not when accent colour is
 * applied to the title bar. */
@media (-moz-platform: windows) and (not (-moz-windows-accent-color-in-titlebar)) {
  :root[sizemode="normal"][tabsintitlebar]:not([inFullscreen]) #navigator-toolbox {
    padding-top: 1px !important;
  }
}

/* Add a shadow when the toolbars move over content, eg. in macOS hovering over
 * the menu bar in fullscreen mode. */
#navigator-toolbox[style*="transform"] {
  box-shadow: 0 -3px 5px 3px light-dark(rgb(0 0 0 / .3), rgb(0 0 0 / .6)) !important;
}

/* Rounded Corners Tweak */
@media {
  /* Since Firefox 120, when the bookmarks bar is set to only open on new tabs,
  * the bookmarks bar overlaps the #browser element. */

  /* Change the element that shifts the browser content to the correct position. */
  #main-window[BookmarksToolbarOverlapsBrowser] .newTabBrowserPanel,
  #main-window[BookmarksToolbarOverlapsBrowser] #sidebar-box {
    padding-top: 0 !important;
  }

  :main-window[BookmarksToolbarOverlapsBrowser] #browser {
    margin-top: var(--bookmarks-toolbar-overlapping-browser-height);
  }

  /* Make sure that the toolbars are not positioned in-front of the browser
  * element. */
  #main-window[BookmarksToolbarOverlapsBrowser] #navigator-toolbox:not([style*="z-index"]) {
    z-index: auto !important;
  }

  /* Move the browser element in-front of the toolbars when on the new tab page. */
  #main-window:not([BookmarksToolbarOverlapsBrowser]) #browser {
    z-index: 1 !important;
  }

  /* Variables used for the rounded corners. */
  #main-window:not([chromehidden~="toolbar"]) {
    --uc-tweak-rounded-corners-padding: 10px;
    --uc-tweak-rounded-corners-radius: 8px;
    --uc-tweak-rounded-corners-shadow:
      0 -.8px 0 0 rgb(0 0 0 / 0.02),
      0 0.5px 1px 1px rgb(0 0 0 / 0.06),
      0 1px 1px rgb(0 0 0 / 0.1);
    --browser-frame-bgcolor: var(--lwt-accent-color);

    /* Different shadow for higher resolution displays. */
    @media (resolution > 1.8dppx) {
      --uc-tweak-rounded-corners-shadow:
        0 0 0.5px 0.5px rgb(0 0 0 / 0.06),
        0 0.5px 1.5px rgb(0 0 0 / 0.1);
    }

    @media {
      --browser-frame-bgcolor: var(--lwt-accent-color);
    }
  }

  /* Hide border below titlebar on macOS, as its titlebar already has a border. */
  @media (-moz-platform: macos) {
    :root[chromehidden~="toolbar"][chromehidden~="location"][chromehidden~="directories"] {
      border-top: none !important;
    }
  }

  /* Remove separator between toolbars and the browser window. */
  #navigator-toolbox {
    border-bottom: none !important;
  }

  /* Disable rounded corners in fullscreen, only if the toolbar is hidden. */
  :root[inFullscreen] #navigator-toolbox[style*="margin-top"] + #browser,
  :root[inDOMFullscreen] #browser {
    --uc-tweak-rounded-corners-padding: 0;
    --uc-tweak-rounded-corners-radius: 0;
    --uc-tweak-rounded-corners-shadow: unset;
  }
  
  /* Apply rounded corners to the browser container. */
  #tabbrowser-tabbox .browserStack {
    margin-inline-start: var(--uc-tweak-rounded-corners-padding) !important;
    margin-inline-end: var(--uc-tweak-rounded-corners-padding) !important;
    margin-block-start: 0px !important;
    margin-block-end: var(--uc-tweak-rounded-corners-padding) !important;
    border-radius: var(--uc-tweak-rounded-corners-radius) !important;
    box-shadow: var(--uc-tweak-rounded-corners-shadow) !important;
    background-color: var(--tabpanel-background-color) !important;
    position: relative !important;

    /* Use pseudo element overlay to simulate rounded corners, similar to the
     * tab corners, fixes bug with backdrop-filter. */
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      /* Draw toolbar background on the negative corner space, then draw the
       * same from the browser window shadow on top. */
      box-shadow:
        var(--uc-tweak-rounded-corners-shadow, 0 0 transparent),
        0 0 0 16px var(--browser-frame-bgcolor) !important;
      clip-path: inset(0);
      pointer-events: none;
    }
  }

  /* Apply rounded corners to the browser content. */
  #tabbrowser-tabbox .browserStack browser {
    border-radius: var(--uc-tweak-rounded-corners-radius) !important;
  }

  /* Prevent status panel corners and shadow from appearing outside the browser. */
  #statuspanel {
    overflow: hidden;
  }
    
 /* Devtools window when docked to the left or right. */
  .devtools-toolbox-side-iframe {
    margin-block-end: var(--uc-tweak-rounded-corners-padding) !important;
    border-radius: var(--uc-tweak-rounded-corners-radius) !important;
    overflow: hidden !important;
    box-shadow: var(--uc-tweak-rounded-corners-shadow) !important;

    /* Devtools window when docked to the left. */
    &:first-child {
      margin-inline-start: var(--uc-tweak-rounded-corners-padding) !important;
    }

    /* Devtools window when docked to the right. */
    &:last-child {
      margin-inline-end: var(--uc-tweak-rounded-corners-padding) !important;
    }
  }

  /* Devtools window when docked to the bottom. */
  .devtools-toolbox-bottom-iframe {
    margin: var(--uc-tweak-rounded-corners-padding) !important;
    margin-block-start: 0 !important;
    border-radius: var(--uc-tweak-rounded-corners-radius) !important;
    overflow: hidden !important;
    box-shadow: var(--uc-tweak-rounded-corners-shadow) !important;
  }

  /* Hide devtools splitter. */
  .devtools-side-splitter,
  .devtools-horizontal-splitter {
    background-color: transparent !important;
  }

  /* Remove sidebar border when not in full screen. */
  :not(:root[inFullscreen] #navigator-toolbox[style*="margin-top"]) + #browser #sidebar-splitter {
    border-inline-width: 0 !important;
  }

  :root[sizemode="normal"] #tabbrowser-tabbox .browserStack) {
    margin-inline-end: 25px !important;
    margin-block-end: 25px !important;
}

  /* Apply colour to the frame around the browser window. */
  #browser {
    background-color:  var(--browser-frame-bgcolor, var(--lwt-accent-color));

  /* Change colour of page when loading */
  #tabbrowser-tabpanels {
    background-color: transparent !important;
  }
}
